<template>
	<view class="content">
		<view class="card">
			<view style="margin-bottom: 20rpx;">
				<u--textarea v-model="content" placeholder="多多记录你的美好生活吧" count></u--textarea>
			</view>
			<view class="img-style-1" v-if="type=='video'">
				<image src="../../static/corner.png" mode="" @click="escVideo"></image>
				<video object-fit="cover" :src="media[0].url">
				</video>
			</view>

			<u-upload v-else :fileList="media" @afterRead="afterRead" @delete="deletePic" name="media" multiple
				:maxCount="9" :accept="type||'media'"></u-upload>



		</view>

		<view class="btn">
			<view class="">
				存为草稿
			</view>
			<view class="" @click="submit">
				发布
			</view>
		</view>
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				media: [],
				type: ''
			};
		},

		onLoad(options) {
			this.type = options.type
				this.media.push({
					url: this.$baseURL + options.url
				})
			
		},

		methods: {
			escVideo() {
				this.media = []
				this.type = ''
			},
			submit() {
				
				let code=false
				for (let i = 0; i < this.content.length; i++) {
					let item=this.content[i]
					if(!(uni.$u.test.chinese(item)||uni.$u.test.enOrNum(item))) {
						code=true
						i=this.content.length
					} 
				}
				
				if(code) return uni.showToast({
					title: '动态内容禁止特殊字符！',
					icon:'none'
				})
				
				
				let data = {
					content: this.content
				}
				let name='images'
				if(this.type=='video') name='video'
				data[name] = []
				this.media.forEach(item => {
					data[name].push(item.url)
				})
				data[name] = data[name].join(',')
				this.$myRuquest('/home/user/create_trends', data, 'POST').then(res=>{
					this.$refs.uToast.show({
						type: 'success',
						message: '发布成功',
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			},
			// 删除图片
			deletePic(event) {
				this[`${event.name}`].splice(event.index, 1)
				if (!this[`${event.name}`].length) this.type = '';

			},
			// 新增图片
			async afterRead(event) {


				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`${event.name}`].length
				lists.map((item) => {
					this[`${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i])
					let item = this[`${event.name}`][fileListLen]
					this[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.$baseURL + result.data
					}))
					fileListLen++
				}
			},
			uploadFilePromise(file) {
				this.type = file.type
				return this.$uploadFiles({
					filePath: file.url,
					type: file.type
				})


			},
		}
	};
</script>

<style lang="scss">
	.img-style-1 {
		display: block;
		width: 50%;
		max-height: 600rpx;
		min-height: 300rpx;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		border: 2rpx dashed #ccc;

		view {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		image {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 99;
		}

		video {
			width: 100%;
		}
	}

	.content {
		padding: 20rpx;
		background-color: #F5F5F5;
		min-height: 100vh;

		.card {
			padding: 20rpx;
			border-radius: 12rpx;
			background: #ffffff;
		}

		.btn {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;

			view {
				width: 300rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				background-color: $theme-color;
				color: #ffffff;
			}

			view:nth-child(1) {
				background-color: #ccc;
			}
		}
	}
</style>
